<template>
  <div class="home-icons">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item,index) in page" :key="index">
        <div class="icons-item" v-for="page in item" :key="page.id">
          <span :class="page.icons"></span>
          <p>{{page.name}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data () {
    return {
      iconList: [
        {
          id: 0,
          icons: 'iconfont icon-jingdianmenpiao',
          name: '景点取票'
        },
        {
          id: 1,
          icons: 'iconfont icon-dongwuyuan',
          name: '动物园'
        },
        {
          id: 2,
          icons: 'iconfont icon-youlechang',
          name: '游乐场'
        },
        {
          id: 3,
          icons: 'iconfont icon-meiriyouxibitongjiweijihuo',
          name: '一日游'
        },
        {
          id: 4,
          icons: 'iconfont icon-xiariyinpin',
          name: '夏日饮品'
        },
        {
          id: 5,
          icons: 'iconfont icon-youleyuan',
          name: '主题乐园'
        },
        {
          id: 6,
          icons: 'iconfont icon-gongyuan',
          name: '公园'
        },
        {
          id: 7,
          icons: 'iconfont icon-zhongguo-gugong',
          name: '故宫'
        },
        {
          id: 8,
          icons: 'iconfont icon-biaoqiankuozhan_bangdan-348',
          name: '游玩榜单'
        },
        {
          id: 9,
          icons: 'iconfont icon-ziyuan',
          name: '全部'
        }
      ],
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true
      }
    }
  },
  computed: {
    page () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const idx = Math.floor(index / 8)
        if (!pages[idx]) pages[idx] = []
        pages[idx].push(item)
      })
      return pages
    }
  }
}
</script>

<style scoped>
.home-icons {
  background: #fff;
}
.home-icons {
  margin-top: 0.3rem;
}
.icons-item {
  width: 25%;
  padding-bottom: 25%;
  height: 0;
  float: left;
}
.icons-item span {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 auto;
  text-align: center;
  line-height: 1.1rem;
}
.icons-item p {
  text-align: center;
  color: #212121;
  font-size: 0.28rem;
}
</style>
